<template>
  <el-menu
    class="indexLeft-page"
    background-color="#545c64"
    text-color="#747B82"
    @select="select"
    :default-active="showMenu"
  >
    <template v-for="item in menus" v-if="item.type==1">
      <template v-if="item.subMenus">
        <el-submenu :index="item.id.toString()">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item
            v-for="subItem,i in item.subMenus"
            v-if="subItem.type==1"
            :key="i"
            :index="subItem.url+'_'+subItem.name"
          >{{ subItem.name }}</el-menu-item>
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item :index="item.id.toString()">
          <i :class="item.icon"></i>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>
<script>
export default {
  props: ["showMenu"],
  data() {
    return {
      menus: [
        {
          id: 1,
          name: "产品管理",
          type: 1,
          url: "",
          icon: "iconfont icon-xitongshezhi",
          sort: 3,
          parentId: null,
          subMenus: [
            {
              id: 12,
              name: "贷款产品列表",
              type: 1,
              url: "productList",
              icon: "",
              sort: 2,
              parentId: null,
              subMenus: []
            }
          ]
        },
        {
          id: 2,
          name: "运营管理",
          type: 1,
          url: "",
          icon: "iconfont icon-xitongshezhi",
          sort: 3,
          parentId: null,
          subMenus: [
            {
              id: 12,
              name: "点击数据",
              type: 1,
              url: "clickData",
              icon: "",
              sort: 2,
              parentId: null,
              subMenus: []
            }
          ]
        }
      ]
    };
  },
  methods: {
    select(e) {
      let that = this;
      that.$emit("clickMenu", {
        tabOptions: e
      });
    }
  },
  created() {
    let that = this;
    let menuList = that.localData("get", "login_user").a;
  }
};
</script>
<style lang="less">
.indexLeft-page {
  border-right: 0;
  min-height: 100%;
  .el-submenu {
    overflow: hidden;
    .el-submenu__title {
      .iconfont {
        position: relative;
        top: -1px;
        margin-right: 5px;
        font-size: 18px;
      }
      .el-submenu__icon-arrow {
        ms-transform: rotate(-90deg);
        transform: rotateZ(-90deg);
        margin-top: -4px;
      }
    }
    .el-menu {
      .el-menu-item {
        height: 40px;
        line-height: 40px;
        &.is-active {
          background-color: #000 !important;
          position: relative;
          &::after {
            left: 0;
            top: 0;
            position: absolute;
            content: "";
            width: 2px;
            height: 100%;
            background-color: #ff7500;
          }
          &::before {
            right: 0;
            top: 50%;
            margin-top: -5px;
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            border-top: 5px solid transparent;
            border-right: 5px solid #f6f6f6;
            border-bottom: 5px solid transparent;
          }
        }
      }
    }
    &.is-opened {
      .el-submenu__icon-arrow {
        -ms-transform: rotate(0deg);
        transform: rotateZ(0deg);
      }
    }
    &.is-active {
      .el-submenu__title {
        color: #fff !important;
        * {
          color: #fff;
        }
      }
    }
  }
  .el-menu-item.is-active {
    color: #ff7500;
  }
}
</style>
